<script setup lang="ts">
import { ref, reactive } from 'vue'

</script>

<template>
    <div class="container">
        <div class="top">
            <div class="left">
                <span>
                    学院：XXXXXXXX
                </span>
                <span>
                    开始时间：2022-06-13 12:02:23
                </span>
                <span>
                    结束时间：2022-06-13 12:02:23
                </span>
            </div>
            <div class="right">
                右边内容
            </div>
        </div>
         <!--课程介绍-->
        <div class="tittle">
           <div class="two">
                <div class="twocon">
                    <div class="conleft"></div>
                    <div class="conright">
                        <h3>课程介绍</h3>
                    </div>
                </div>
            </div>
           <div class="coursecontent">
               <div class="fengmian">
                   <img src="../../static/course.png" alt="课程封面">
               </div>
               <div class="wenben">
                   <p>
                       文本介绍附件是东方哈桑对付海盗是的发挥教师的 还是大佛啥的还是大佛寺大富豪撒大化肥佛山大欧式的粉红色阿达啥地方啥的发挥阿斯蒂芬后士大夫阿松大撒旦佛和
                        文本介绍附件是东方哈桑对付海盗是的发挥教师的 还是大佛啥的还是大佛寺大富豪撒大化肥佛山大欧式的粉红色阿达啥地方啥的发挥阿斯蒂芬后士大夫阿松大撒旦佛和
                         文本介绍附件是东方哈桑对付海盗是的发挥教师的 还是大佛啥的还是大佛寺大富豪撒大化肥佛山大欧式的粉红色阿达啥地方啥的发挥阿斯蒂芬后士大夫阿松大撒旦佛和
                          文本介绍附件是东方哈桑对付海盗是的发挥教师的 还是大佛啥的还是大佛寺大富豪撒大化肥佛山大欧式的粉红色阿达啥地方啥的发挥阿斯蒂芬后士大夫阿松大撒旦佛和
                   </p>
               </div>
           </div>
        </div>
         <!--连接-->
        <div class="har">
            <div class="two">
                <div class="twocon">
                    <div class="conleft"></div>
                    <div class="conright">
                        <h3>快速连接</h3>
                    </div>
                </div>
            </div>
            <div class="connect">
                <div class="two">
                    <div class="twocon">
                        <div class="conleft"></div>
                        <div class="conright">
                            <h3>视频资料</h3>
                        </div>
                    </div>
                </div>
                <div class="two">
                    <div class="twocon">
                        <div class="conleft"></div>
                        <div class="conright">
                            <h3>课程教案</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--人物介绍-->
        <div>
            <div class="intro">
                <div class="two">
                    <div class="twocon">
                        <div class="conleft"></div>
                        <div class="conright">
                            <h3>人物介绍</h3>
                        </div>
                    </div>
                </div>
                <div class="introdetial">
                    <div class="people">
                        <div class="peopleintro">
                            <div class="peopleimg">
                                <img src="../../static/people1.png" alt="人物">
                            </div>
                            <div class="peopledetial">
                                <p>
                                    <span>主讲人： 钟南山</span>
                                   男，汉族，中共党员，1936年10月20日 [1]  出生于江苏南京，福建厦门人，呼吸内科学家，广州医科大学附属第一医院国家呼吸系统疾病临床医学研究中心主任，中国工程院院士话说恶趣...
                                   <a href="">
                                    <b>更多</b>
                                    >>
                                </a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="people">
                        <div class="peopleintro">
                            <div class="peopleimg">
                                <img src="../../static/people1.png" alt="人物">
                            </div>
                            <div class="peopledetial">
                                <p>
                                    <span>主讲人： 钟南山</span>
                                   男，汉族，中共党员，1936年10月20日 [1]  出生于江苏南京，福建厦门人，呼吸内科学家，广州医科大学附属第一医院国家呼吸系统疾病临床医学研究中心主任，中国工程院院士话说恶趣...
                                   <a href="">
                                    <b>更多</b>
                                    >>
                                </a>
                                </p>
                                
                            </div>
                        </div>
                    </div>
            </div>
            </div>
        </div>
    </div>
   
</template>

<style scoped>
p{
     text-indent: 2rem;
    display: inline-block;
    text-align: left;
    color: #414141;
    line-height: 30px;
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}
ul,li{
    list-style: none;
}
.container{
    width: 1200px;
    font-size: 15px;
    margin: auto;
    align-items: center;
    padding-top: 15px;
    background-color: #fff;
    overflow: hidden
}
.container .top{
    color: red;
    display: flex;
    justify-content: space-between;
}
.container .top .left{
    display: flex;
    flex-direction: column;
}

.container .tittle{
    margin-top: 20px;
    text-align: center;
}
.container .tittle .coursecontent{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.container .tittle .coursecontent .fengmian{
    margin-right: 20px;
}
.connect{
    overflow: hidden;
    display: flex;
    justify-content: space-around;
    background: url(../../static/xian_20.jpg);
}
.conright{
    cursor:pointer;
}
.conright h3{
    border-bottom: 1px dashed #959595;
    padding: 20px 8px 0 2px;
    width: 100px;
    text-align: center;
    line-height: 50px;
    margin-left: 28px;
}

.introdetial{
     overflow: hidden;
    display: flex;
    justify-content: space-around;
}
.peopleintro{
    display: flex;
}
.wenben{
    max-width: 600px;
    max-height: 270px;
}

.peopleimg img{
    width: 136px;
    height: 136px;
    border-radius: 50%;
}
.introdetial .peopleintro .peopledetial{
    overflow: hidden;
    margin-left: 20px;
    width: 300px;
    max-height: 170px;
}
</style>
